<template>
<!-- 分隔占位 -->
  <div class="cutoffRule">
    <!-- 预览控制区 -->
    <div :style="{padding:formData.space + 'px',background:isBgColor }">
      <div v-show="formData.tabsNum == 2" :style="{borderTopWidth:'1.5px',borderTopStyle:formData.line,borderTopColor:formData.lineColor}" />
    </div>
    <!-- <div class="previewStyle" :style="{background: formData.bgColor, paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
      <div class="textContent" :class="{font_w: fontBold,font_ital: fontStyle,font_d: fontDecoration}" :style="{fontSize: formData.fontSize/2 + 'px', color: formData.textColor, textAlign: formData.align}">{{ formData.text }}</div>
    </div> -->
    <!-- 编辑工作区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">分隔占位</div>
           <div class="tabRadioWrap">
            <el-radio-group v-model="formData.tabsNum" style="width: 100%;">
              <el-radio-button label="1">空白</el-radio-button>
              <el-radio-button label="2">分割线</el-radio-button>
            </el-radio-group>
          </div>
          <div class="styleWrap tab-main">
            <strong>样式设置</strong>
            <div>
              <div class="dis dis_ju_spb al_item w100e item_mar" v-show="formData.tabsNum == 2">
                <div class="dis al_item">
                  <span>线样式</span>
                </div>
                <div class="dis al_item">
                  <el-radio-group v-model="formData.line" size="small">
                    <el-radio-button label="solid">实线</el-radio-button>
                    <el-radio-button label="dashed">虚线</el-radio-button>
                    <el-radio-button label="dotted">点线</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="block">
                <span>空白间距</span>
                <el-slider v-model="formData.space" input-size="mini" :show-tooltip="false"></el-slider>
                <el-input size="mini" v-model="formData.space" >
                  <template  slot="append">像素</template>
                </el-input>
              </div>
              <div class="dis dis_ju_spb al_item w100e item_mar" v-show="formData.tabsNum == 2">
                    <div class="dis al_item">
                      <span>线颜色</span>
                      <span class="text_mar">{{ formData.lineColor }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker
                        v-model="formData.lineColor"
                        :show-alpha="false"
                        color-format="hex"
                        size="mini"
                      />
                    </div>
                  </div>
              <div class="dis dis_ju_spb al_item w100e item_mar">
                <div class="dis al_item">
                  <span>背景颜色</span>
                  <span class="text_mar">{{ formData.bgColor }}</span>
                </div>
                <div class="dis al_item">
                  <div class="resetText" @click="resetBoderColor(2)">重置</div>
                  <el-color-picker
                    v-model="formData.bgColor"
                    :show-alpha="false"
                    color-format="hex"
                    size="mini"
                  />
                </div>
              </div>
              <div class="dis dis_ju_spb al_item w100e item_mar">
                <div class="dis al_item">
                  <span>背景</span>
                </div>
                <div class="dis al_item">
                  <el-radio-group v-model="formData.bgShow" size="small">
                    <el-radio-button label="1">显示</el-radio-button>
                    <el-radio-button label="2">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
